import React, { useState, useEffect } from 'react'
import './myscss/Fans.scss'
import axios from 'axios';
import { sleep } from 'antd-mobile/es/utils/sleep'
import { InfiniteScroll, List } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
axios.defaults.baseURL = 'http://localhost:3000';

export default function Fans() {
  let navigate = useNavigate()
  
  //替换手机号码
  const [phone, setphone] = useState([])
  const makePhoneNumber = (phone) => {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  }
  //实现触底加载
  const [fans, setData] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(1)
  async function loadMore() {
    const append = await axios.get('/zjl_getfans', { params: { current: page, pagesize: 5 } }).then(async (res) => {
      await sleep(2000)
      let { data: { fans } } = res
      return fans
    })
    setPage(page + 1)
    setData(val => [...val, ...append])
    setHasMore(append.length > 0)
  }
  // 使用 useEffect 设置定时器
  const [pages,setpages]=useState()
  useEffect(() => {
   
    setpages( localStorage.getItem('fans'))
    // getfans()
    const makePhone = fans.map(item => (
      makePhoneNumber(item.phone)
    ))
    setphone(makePhone)
  
  }, [fans]); // 空数组作为第二个参数，表示只在组件挂载和卸载时运行
  return (
    <div id='Fans'>
      <div id="main">
      
        <div className='fans_length'>
          <b onClick={() => { navigate('/mine') }}>&lt;</b><span>粉丝</span>
        </div>

        <div id="main">
          <h4>共<span style={{ color: 'red' }}>{pages}</span>个粉丝</h4>
          <List>
            {
              fans.map((item, index) => (
                <div className='li_all' key={item._id}>
                  <div className="li" key={item._id}>
                    <div className="fans_left">
                      <img src={item.path} alt="" />
                      <div>
                        <p>{item.name}</p>
                        <p>{item.gender} <span>{item.age}岁</span></p>
                      </div>
                    </div>
                    <div className='fans_right'>

                      {
                        phone.map((i, Index) => (
                          <p key={Index}>{Index === index ? i : ''}</p>
                        ))
                      }

                    </div>
                  </div>
                </div>
              ))
            }
          </List>
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>

      </div>
    </div>
  )
}

